<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Test de Cálculo</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script id="MathJax-script" async
    src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
  <style>
    body {
      font-family: Times New Roman, serif;
      margin: 40px;
      background: #f4f4f4;
    }
    .question-container {
      color: #0077cc;
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      margin-bottom: 20px;
      transition: background-color 0.3s;
    }
    .options {
      margin-top: 10px;
    }
    .options label {
      display: block;
      margin-bottom: 5px;
    }
    .correct {
      background-color: #d4edda !important;
      color: #155724;
      font-weight: bold;
    }
    .incorrect {
      background-color: #f8d7da !important;
      color: #721c24;
      font-weight: bold;
    }
    #result {
      margin-top: 30px;
    }
  </style>
</head>
<body>

<h2>TEST DE CÁLCULO. Selecciona la respuesta correcta en cada caso: </h2>

<form id="quizForm"></form>

<div style="margin-top: 20px;">
  <button type="button" onclick="calcularResultado()">Enviar respuestas</button>
  <button type="button" onclick="reiniciarFormulario()">Limpiar y reintentar</button>
</div>

<div id="result">
  <canvas id="resultChart" width="400" height="400"></canvas>
  <div id="feedback"></div>
</div>

 
<script>
const preguntas = [
{
  texto: "El límite \\(~\\displaystyle \\lim_{x \\rightarrow 0^+} x^2~ln(1/x^3)~\\) vale \\(~\\displaystyle 0~\\), ya que:",
  opciones: [
    { texto: "Ninguna de las otras \\( 3 \\) respuestas es correcta. ", correcta: false },
    { texto: "\\( \\displaystyle x~\\)  y \\( \\displaystyle ln(1/x)~\\) son infinitésimos equivalentes.", correcta: false },
    { texto: "\\( \\displaystyle 1/x~\\) tiende a \\( \\displaystyle \\infty~\\) (cuando \\( \\displaystyle ~x\\rightarrow 0^+\\) ) más rápido que \\( \\displaystyle ln(1/x)\\).", correcta: true },
    { texto: "Se puede aplicar el criterio cero por acotada.  ", correcta: false }
  ]
},
{
  texto: "Sea la función real de variable real \\( \\displaystyle~f(x)=\\left\\{ \\begin{array}{l}\\displaystyle\\frac{arc~sin(2x)}{x},~~x < 0\\\\  \\displaystyle 2,~~x=0\\\\ \\displaystyle (1+x)^{1/x},~~x > 0.\\end{array}\\right.~\\). \\(~~\\)Entonce:  ",
  opciones: [
    { texto: "\\( \\displaystyle f~\\) presenta una discontinuidad evitable en \\( \\displaystyle~x=0\\).", correcta: false },
    { texto: "\\( \\displaystyle f~\\) presenta una discontinuidad  esencial en \\( \\displaystyle~x=0\\).", correcta: false },
    { texto: "\\( \\displaystyle f~\\) es contínua en \\( \\displaystyle~x=0\\).", correcta: false },
    { texto: "\\( \\displaystyle f~\\) presenta una discontinuidad de salto en \\( \\displaystyle~x=0\\).", correcta: true }
  ]
},
{
  texto: "La recta normal a la gráfica de la función  \\( \\displaystyle~f(x)=\\frac{2x}{3x+1}~\\) en el punto de abscisa \\( \\displaystyle~x=1~\\) es:",
  opciones: [
    { texto: "\\( \\displaystyle y=-8x+17/2. \\)", correcta: true },
    { texto: "\\( \\displaystyle y=(-x+1)/8. \\)", correcta: false },
    { texto: "\\( \\displaystyle y=x+8. \\)", correcta: false },
    { texto: "Ninguna de las otras \\( 3 \\) respuestas es correcta.  ", correcta: false }
  ]
},
{
  texto: " Sea la función real de variable real \\( \\displaystyle f(x)=\\left\\{ \\begin{array}{l}\\displaystyle 4x^2+x+1,~~x \\le 0\\\\ \\displaystyle cos(\\pi x/4),~~0 < x \\le 2\\\\ \\displaystyle\\pi(1-e^{x-2}),~~x > 2.\\end{array}\\right.~\\). \\(~~\\)Entonces:",
  opciones: [
    { texto: "\\( \\displaystyle f~\\) es derivable en \\( \\displaystyle \\mathbb{R}-\\{2\\}\\), y no derivable en \\( \\displaystyle~x=2\\).", correcta: false },
    { texto: "\\( \\displaystyle f~\\) es derivable en \\( \\displaystyle \\mathbb{R}\\).", correcta: false },
    { texto: "Ninguna de las otras \\( 3 \\) respuestas es correcta.", correcta: true},
    { texto: "\\( \\displaystyle f~\\) es derivable en \\( \\displaystyle \\mathbb{R}-\\{0\\}\\), y no derivable en \\( \\displaystyle~x=0\\).", correcta: false}
  ]
},
{
  texto: "Sea \\(~\\displaystyle A\\subset \\mathbb{R}~\\) el conjunto formado por todos los números reales \\(~\\displaystyle x~\\) tales que \\(~\\displaystyle x^2 > 2x\\). \\(~\\)Entonces:",
  opciones: [
    { texto: "\\( \\displaystyle x=0.5~\\) y \\( \\displaystyle x=7~\\) son puntos de acumulación de \\(~\\displaystyle A\\), pero \\(~\\displaystyle x=2~\\) no.", correcta: false },
    { texto: "\\( \\displaystyle x=-5~\\) y \\( \\displaystyle x=2~\\) son puntos de acumulación de \\(~\\displaystyle A\\), pero \\(~\\displaystyle x=1~\\) no.", correcta: true },
    { texto: "\\( \\displaystyle x=1~\\) y \\( \\displaystyle x=2~\\) son puntos de acumulación de \\(~\\displaystyle A\\), pero \\(~\\displaystyle x=0~\\) no.", correcta: false },
    { texto: "\\( \\displaystyle A~\\) no tiene puntos de acumulación.", correcta: false }
  ]
}
];

function barajar(array) {
  return array.sort(() => Math.random() - 0.5);
}

function generarCuestionario() {
  const form = document.getElementById("quizForm");
  form.innerHTML = "";

  preguntas.forEach((pregunta, index) => {
    const opcionesBarajadas = barajar([...pregunta.opciones]);

    const div = document.createElement("div");
    div.className = "question-container";

    const htmlPregunta = `
      <div class="question">
        <strong>${index + 1}. ${pregunta.texto}</strong>
      </div>
      <div class="options">
        ${opcionesBarajadas.map((op, i) => `
          <label>
            <input type="radio" name="q${index}" value="${op.correcta ? 1 : 0}">
            ${op.texto}
          </label>`).join('')}
      </div>
    `;

    div.innerHTML = htmlPregunta;
    form.appendChild(div);
  });

  MathJax.typeset();
}

function calcularResultado() {
  const form = document.getElementById('quizForm');
  const formData = new FormData(form);
  let aciertos = 0;

  preguntas.forEach((pregunta, i) => {
    const contenedor = form.querySelectorAll(".question-container")[i];
    contenedor.classList.remove("correct", "incorrect");
    const opciones = contenedor.querySelectorAll("input");

    let respondidaCorrectamente = false;

    opciones.forEach(op => {
      const label = op.closest("label");
      label.classList.remove("correct", "incorrect");

      if (op.checked) {
        if (op.value === "1") {
          label.classList.add("correct");
          respondidaCorrectamente = true;
          aciertos++;
        } else {
          label.classList.add("incorrect");
        }
      }

      // Mostrar la correcta aunque no haya sido seleccionada
      //if (op.value === "1" && !op.checked) {
        //label.classList.add("correct");
      //}
    });

    contenedor.classList.add(respondidaCorrectamente ? "correct" : "incorrect");
  });

  const porcentaje = (aciertos / preguntas.length) * 100;
  mostrarGrafico(porcentaje);
  mostrarFeedback(porcentaje);
  MathJax.typeset();
}

function mostrarGrafico(porcentaje) {
  const ctx = document.getElementById('resultChart').getContext('2d');
  if (window.myChart) window.myChart.destroy();
  window.myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ['Aciertos', 'Errores'],
      datasets: [{
        data: [porcentaje, 100 - porcentaje],
        backgroundColor: ['#4caf50', '#f44336']
      }]
    },
    options: {
      responsive: false,
      plugins: {
        legend: {
          position: 'bottom'
        }
      }
    }
  });
}

function mostrarFeedback(p) {
  let emoji = '';
  let texto = '';
  if (p === 100) {emoji = '&#129321 &#127942'; texto = 'Excelente, todo correcto. ¡Lo has hecho genial!';}
  if (p === 80) {emoji = '&#128513  &#127941'; texto = ' Muy bien. Sólo ha faltado un poquito.';}
  if (p === 60) {emoji = '&#128515 &#128076'; texto = ' Buen trabajo. Ya casi lo tienes.';}
  if (p === 40) {emoji = '&#128522 &#128640'; texto = ' Vas tomándole el pulso. ¡Sigue así!';}
  if (p === 20) {emoji = '&#128528 &#128692'; texto = ' Por algo se empieza. ¡No te rindas!';}
  if (p === 0) {emoji = '&#128542  &#128170'; texto = ' Te recomiendo repasar los conceptos relacionados y volver a intentarlo. ¡Ánimo!';}

  document.getElementById('feedback').innerHTML =
    `
    <div style="font-size: 2em; text-align: center; margin-top: 20px;">
      <div style="font-size: 3em;">${emoji}</div>
      <p><strong>Resultado:</strong> ${p.toFixed(0)}%</p>
      <p>${texto}</p>
    </div>`;
}


function reiniciarFormulario() {
  const form = document.getElementById('quizForm');
  if (window.myChart) {
    window.myChart.destroy();
    window.myChart = null;
  }
  document.getElementById('feedback').innerHTML = '';
  generarCuestionario(); // recrea el cuestionario con orden nuevo
}

// Cargar cuestionario al inicio
generarCuestionario();
</script>

</body>
</html>